/*
 * @Author: Yxliam
 * @Date: 2024-01-18 10:29:05
 * @LastEditors: Yxliam
 * @LastEditTime: 2024-01-24 14:42:55
 * @Description:
 */
import React, { memo, useState, useEffect } from "react";
import {
  View,
  Text,
  StyleSheet,
  ImageBackground,
  Image,
  Animated,
  TouchableOpacity,
  Modal,
} from "react-native";
import {
  ScrollView,
  GestureHandlerRootView,
} from "react-native-gesture-handler";
import { p } from "utils/pxToDp";
import themeStore from "stores/theme";
import YText from "components/YText";
import { Image as ExpoImage } from "expo-image";
import { SafeAreaView } from "react-native-safe-area-context";
import Ionicons from "@expo/vector-icons/Ionicons";
import { AntDesign } from "@expo/vector-icons";
import commonStyle from "utils/style";
import { LinearGradient } from "expo-linear-gradient";

const bgImg = {
  uri: "https://eat.toolbon.com/static/images/login.jpeg",
};

const My = (props: any) => {
  const theme = themeStore.theme;

  // console.log('props-->',props);

  const goPath = () => {
    props.navigation.push("Skin");
  };

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <LinearGradient
        colors={[
          theme.gradientm1,
          theme.gradientm2,
          theme.gradientm3,
          theme.gradientm4,
        ]}
        locations={[0, 0.1, 0.2, 1]}
        style={{ flex: 1 }}
      >
        <SafeAreaView>
          <View style={[styles.top, commonStyle.flexrowaligncenter]}>
            <ExpoImage
              source={require("assets/boy.png")}
              style={[styles.face]}
            />
            <View
              style={[{ marginLeft: p(10) }, commonStyle.flexrowaligncenter]}
            >
              <YText color={theme.mainText} bold size={theme.f34}>
                奇妙的双子座121
              </YText>
              <AntDesign name="edit" size={15} color="black" />
            </View>
          </View>
          {/*  vip卡片 */}
          <View
            style={[
              styles.vipcard,
              commonStyle.flexrowcenterbetween,
              {
                backgroundColor: theme.mybg,
              },
            ]}
          >
            <View style={[commonStyle.flexrow]}>
              <Image
                source={require("assets/my-vip.png")}
                style={styles.myvip}
              />
              <View>
                <YText color={theme.mainText} size={theme.f28} bold>
                  解锁会员
                </YText>
                <YText
                  style={{ marginTop: p(10) }}
                  color={theme.lightText}
                  size={theme.f22}
                >
                  你还不是会员，加入会员解锁更多功能~
                </YText>
              </View>
            </View>
            <View style={styles.viparrowr}>
              <Ionicons name="chevron-forward" color={"white"} size={16} />
            </View>
          </View>

          <View
            style={[
              styles.vipcard,
              commonStyle.mt40,
              {
                backgroundColor: theme.mybg,
              },
            ]}
          >
            <TouchableOpacity onPress={() => goPath()}>
              <View style={[styles.navitem, commonStyle.flexrowcenterbetween]}>
                <View style={[commonStyle.flexrowaligncenter]}>
                  <AntDesign name="skin" size={18} color="black" />
                  <YText
                    style={{ marginLeft: p(10), marginBottom: p(5) }}
                    color={theme.mainText}
                    size={theme.f28}
                    bold
                  >
                    换肤
                  </YText>
                </View>
                <View>
                  <Ionicons
                    name="chevron-forward"
                    size={16}
                    color={theme.mainText}
                  />
                </View>
              </View>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => {
                props.navigation.push("Login");
              }}
            >
              <View style={[styles.navitem, commonStyle.flexrowcenterbetween]}>
                <View style={[commonStyle.flexrowaligncenter]}>
                  <AntDesign name="contacts" size={18} color={theme.mainText} />
                  <YText
                    style={{ marginLeft: p(10), marginBottom: p(5) }}
                    color={theme.mainText}
                    size={theme.f28}
                    bold
                  >
                    关于
                  </YText>
                </View>
                <View>
                  <Ionicons
                    name="chevron-forward"
                    size={16}
                    color={theme.mainText}
                  />
                </View>
              </View>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => {
                props.navigation.push("Sex");
              }}
            >
              <View style={[styles.navitem, commonStyle.flexrowcenterbetween]}>
                <View style={[commonStyle.flexrowaligncenter]}>
                  <AntDesign name="setting" size={18} color={theme.mainText} />
                  <YText
                    style={{ marginLeft: p(10), marginBottom: p(5) }}
                    color={theme.mainText}
                    size={theme.f28}
                    bold
                  >
                    设置
                  </YText>
                </View>
                <View>
                  <Ionicons
                    name="chevron-forward"
                    size={16}
                    color={theme.mainText}
                  />
                </View>
              </View>
            </TouchableOpacity>
          </View>
        </SafeAreaView>
      </LinearGradient>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  top: {
    padding: p(30),
    position: "relative",
  },
  editname: {
    // position: "absolute",
    // zIndex: 3,
    // right: p(30),
    // top: p(30),
    width: p(40),
    height: p(40),
    marginLeft: p(5),
    marginTop: p(5),
  },
  face: {
    width: p(120),
    height: p(120),
    borderRadius: p(60),
    borderColor: "white",
    borderWidth: 2,
  },
  viparrowr: {
    padding: p(6),
    borderRadius: p(10),
    backgroundColor: "black",
  },
  vipcard: {
    paddingHorizontal: p(30),
    paddingVertical: p(20),
    borderRadius: p(25),
    marginHorizontal: p(20),
    marginTop: p(40),
    shadowColor: "#ffffff",
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.1,
    shadowRadius: p(5),
    elevation: p(5),
  },
  myvip: {
    width: p(80),
    height: p(80),
    marginRight: p(10),
  },
  navitem: {
    paddingVertical: p(30),
  },
});

export default My;
